<template>
  <view>
    <!-- #ifdef VUE2 -->
    <vk-uni-pay
      ref="vkPay"
      :status.sync="vkPay.status"
      :code-url.sync="vkPay.codeUrl"
      :qrcode-image.sync="vkPay.qrcodeImage"
      :query-payment-action="vkPay.queryPaymentAction"
      :page-show="vkPay.pageShow"
      :polling="vkPay.polling"
      :return-url="vkPay.returnUrl"
    ></vk-uni-pay>
    <!-- #endif -->

    <!-- #ifdef VUE3 -->
    <vk-uni-pay
      ref="vkPay"
      v-model:status="vkPay.status"
      v-model:code-url="vkPay.codeUrl"
      v-model:qrcodeImage="vkPay.qrcodeImage"
      :query-payment-action="vkPay.queryPaymentAction"
      :page-show="vkPay.pageShow"
      :polling="vkPay.polling"
      :return-url="vkPay.returnUrl"
    ></vk-uni-pay>
    <!-- #endif -->

    <!-- 弹窗开始 -->

    <!-- 二维码支付弹窗开始 -->
    <vk-uni-pay-qrcode-popup
      :provider="form1.provider"
      :provider-pay-method="form1.provider_pay_method"
      :status="vkPay.status"
      :code-url="vkPay.codeUrl"
      :qrcode-image="vkPay.qrcodeImage"
      :total-fee="form1.total_fee"
      :out-trade-no="form1.out_trade_no"
      @close="cancelPay"
      @afresh="afreshPayment"
      @query="queryPayment"
    ></vk-uni-pay-qrcode-popup>
    <!-- 二维码支付弹窗结束 -->

    <!-- 外部浏览器H5支付弹窗确认开始 -->
    <view class="pay-confirm-popup" v-if="vkPay.confirmShow">
      <view class="pay-confirm-popup-content">
        <view class="pay-confirm-popup-title">请确认支付是否已完成</view>
        <view
          ><button type="primary" @click="queryPayment">
            已完成支付
          </button></view
        >
        <view class="pay-confirm-popup-refresh"
          ><button type="default" @click="afreshPayment">
            支付遇到问题，重新支付
          </button></view
        >
        <view
          class="pay-confirm-popup-cancel"
          @click="vkPay.confirmShow = false"
          >暂不支付</view
        >
      </view>
    </view>
    <!-- 外部浏览器H5支付弹窗确认结束 -->

    <!-- 弹窗结束 -->
  </view>
</template>

<script>
export default {
  name: "pay-balance-recharge",
  props: {},
  data() {
    return {
      vkPay: {
        /**
         * 查询支付状态的云函数配置
         * 如果是非路由框架，则action为字符串，值为云函数名称
         * 如果是路由框架，则按下方配置填写
         */
        queryPaymentAction: {
          name: "vk-pay", // 云函数名称
          action: "pay/queryPayment", // 路由模式下云函数地址
          actionKey: "action", // 路由模式下云函数地址的识别key
          dataKey: "data", // 路由模式下云函数请求参数的识别key
        },
        // PC支付的付款二维码地址
        codeUrl: "",
        qrcodeImage: "",
        // 当前支付状态 0:等待发起支付 1:支付中 2:已支付
        status: 0,
        // 当前页面是否显示
        pageShow: true,
        // 启用轮询检测订单支付状态（仅h5支付有效）
        polling: true,
        // 微信手机外部浏览器H5支付时有效，必须是http或https开头的绝对路径，且在微信H5支付配置的域名白名单中。你还需要将此H5域名加入uniCloud白名单
        // 如果此值为空，则默认使用返回当前页面，返回的页面url参数会带上confirmShow=true&out_trade_no=实际订单号
        returnUrl: "",
        // 确认已支付的弹窗开关（微信手机外部浏览器H5支付时有效）
        confirmShow: false,
      },
      // 表单请求数据
      form1: {
        provider: "wxpay",
        provider_pay_method: "", // vkspay个人支付接口专用
        out_trade_no: "",
        openid: "", // 公众号支付必传，小程序支付可以不传
        total_fee: "", // 金额
        type: "recharge", // 标记为余额充值
      },
    };
  },
  created() {
    // #ifdef H5
    let vk = uni.vk;
    // 如果是微信公众号，则需要提前获取openid
    // 但如果用了渠道支付，则不需要获取openid
    vk.callFunction({
      url: "client/order.getPayProvider",
      //title: '请求中...',
      success: (data) => {
        // data.provider为空代表使用微信支付宝官方支付渠道，此时如果是微信公众号，则需要提前获取openid
        if (!data.provider) {
          let env = vk.h5.getEnv();
          if (env === "h5-weixin") {
            if (!this.form1.openid) {
              this.form1.openid =
                vk.getStorageSync("vkmall.h5-weixin-openid") ||
                vk.getVuex("$user.userInfo.wx_openid.h5-weixin");
            }
            if (!this.form1.openid) {
              vk.myfn.user.getH5WeixinCode({
                scope: "snsapi_base",
                state: "openid",
              });
            }
          }
        }
      },
    });
    // #endif
  },
  methods: {
    // 发起支付
    createPayment(obj = {}) {
      let that = this;
      let { form1, vk } = that;
      let { total_fee, provider, integral } = obj;
      if (!provider) {
        // #ifdef MP-WEIXIN
        provider = "wxpay";
        // #endif
        // #ifdef MP-ALIPAY
        provider = "alipay";
        // #endif
        // #ifdef MP-TOUTIAO
        provider = "douyin";
        // #endif
        // #ifdef MP-HARMONY
        provider = "huawei";
        // #endif
      }

      form1.provider = provider;
      form1.total_fee = total_fee;
      form1.integral = integral;
      // #ifdef H5
      // 如果是微信公众号，且是微信支付，则尝试从userInfo中获取openid
      let env = vk.h5.getEnv();
      if (env === "h5-weixin" && provider === "wxpay") {
        if (!form1.openid)
          form1.openid = vk.getVuex("$user.userInfo.wx_openid.h5-weixin");
      }
      // vkspay支持同步回调地址
      form1.return_url = window.location.href;
      // #endif

      that.$refs.vkPay.createPayment({
        // 如果是非路由框架，则外层action不再是json，而为字符串，值为云函数名称，如 action: "你的云函数名称"
        // 如果是路由框架，则按下方配置填写
        action: {
          name: "router", // 云函数名称
          action: "client/order.createPaymentForBalanceRecharge", // 路由模式下云函数地址
          actionKey: "$url", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
          dataKey: "data", // 路由模式下云函数请求参数的识别key
        },
        // 请求数据
        data: form1,
        // 支付订单创建成功回调
        create: (res) => {
          console.log("pay-create", res);
          this.form1.out_trade_no = res.out_trade_no;
          this.form1.provider = res.provider;
          this.form1.provider_pay_method = res.provider_pay_method;
        },
        // 成功回调
        success: (res) => {
          console.log("pay-success", res);
          that.form1.out_trade_no = res.out_trade_no;
          that.queryPayment();
        },
        // 失败回调
        fail: (res) => {
          if (res.failType === "create") {
            // 创建支付失败时提示
            vk.alert(res.msg);
          } else if (res.failType === "request") {
            // 请求支付失败时提示
            vk.toast("请求支付失败");
          } else if (res.failType === "result") {
            // 支付结果失败时提示
            vk.toast("支付失败");
          }
        },
        // 取消回调
        cancel: (res) => {
          vk.toast("用户取消支付");
        },
      });
    },
    // 检测支付状态
    checkPayment(out_trade_no) {
      this.form1.out_trade_no = out_trade_no;
      this.queryPayment();
    },
    // 支付状态查询
    queryPayment() {
      let vk = uni.vk;
      let that = this;
      // 支付状态查询你可以直接查你的订单表，看订单是否已支付（因为最终判定用户是否支付成功应该以你的订单表为准）
      // 如果vkPay.queryPayment接口返回支付成功，但你的订单表查询到未支付，代表你的异步回调函数写的有问题。
      that.$refs.vkPay.queryPayment({
        title: "查询中...",
        data: {
          out_trade_no: that.form1.out_trade_no,
          await_notify: true,
        },
        needAlert: true,
        success: (data) => {
          that.vkPay.status = 2; // 标记为已支付
          that.vkPay.confirmShow = false; // 关闭确认弹窗（微信H5支付有弹窗确认）
          vk.toast("支付成功", "success");
          vk.callFunction({
            url: "client/user.getMyInfo",
          });
          vk.navigateBack();
        },
        fail: (res = {}) => {
          if (res.msg === "订单已退款") {
            that.vkPay.confirmShow = false; // 关闭确认弹窗（微信H5支付有弹窗确认）
          }
        },
      });
    },
    // 取消支付
    cancelPay() {
      this.vkPay.status = 0;
      this.vkPay.codeUrl = "";
    },
    // 重新支付
    afreshPayment() {
      this.createPayment({
        out_trade_no: this.form1.out_trade_no,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 外部浏览器H5支付弹窗确认开始 */
.pay-confirm-popup {
  position: fixed;
  width: 100vw;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  .pay-confirm-popup-content {
    width: 550rpx;
    margin: 50% auto 0 auto;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 40rpx;
    .pay-confirm-popup-title {
      text-align: center;
      padding: 20rpx 0;
      margin-bottom: 30rpx;
    }
    .pay-confirm-popup-refresh {
      margin-top: 20rpx;
    }
    .pay-confirm-popup-cancel {
      margin-top: 20rpx;
      text-align: center;
    }
  }
}
/* 外部浏览器H5支付弹窗确认结束 */

/* 二维码支付弹窗开始 */
.pay-qrcode-popup {
  position: fixed;
  width: 100vw;
  top: 0;
  bottom: 0;
  z-index: 920;
  .pay-qrcode-popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .pay-qrcode-popup-content {
    position: relative;
    width: 500rpx;
    margin: 40% auto 0 auto;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 40rpx;
    box-sizing: content-box;
    text-align: center;
    .pay-qrcode-popup-info {
      text-align: center;
      padding: 20rpx;
      .pay-qrcode-popup-info-fee {
        color: red;
        font-size: 60rpx;
        font-weight: bold;
      }
    }
  }
}
/* 二维码支付弹窗结束 */
</style>
